<template>
  <div>
    <van-nav-bar title="在线问诊" left-arrow @click-left="onClickLeft" />

    <div class="tabs">
      <div v-for="(tab, index) in listTap" :key="index" class="tab" :class="{ active: currentIndex === index }"
        @click="tabClick(tab, index)">
        {{ tab }}
      </div>
    </div>

    <van-empty description="描述文字" />
    <div>
       
            
        
       


    </div>



  </div>
</template>

<script setup lang="ts">
  import {ref} from 'vue';
  import {useRouter } from 'vue-router';
  const listTap = ref([
    '全部',
    '咨询中',
    '已完成',
    '已关闭',
  ])

  const tapslist = ref('')
  const currentIndex = ref(0)
  const router = useRouter()
  const onClickLeft = () => {
    router.back()
  }

  const tabClick = (tab: string, index: number) => {
    currentIndex.value = index
    tapslist.value = tab

  }



</script>

<style lang="scss" scoped>
  .tabs {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 8px;
    text-align: center;
  }

  .tab {
    padding: 10px;
    margin-left: 10px;
    border-bottom: 3px solid skyblue;
    


  }

  

</style>
